<template>
	<my-layout :headerTitle="headerTitleMaps[type]">
		<view class="login-content">
			<view class="bg">
				<image src="../../assets/login/bg.png" mode="widthFix"></image>
			</view>

			<view class="banner" v-if="type===1||type===2">
				<view class="banner-list" :class="{'banner-list--active':item.id===type}"
					v-for="(item,index) in bannerList" @click="type=item.id" :key="item.id">
					<view class="txt">
						{{item.title}}
					</view>
					<view class="line"></view>
				</view>
				<view class="line-bar">

				</view>
			</view>

			<template v-if="type===1">
				<view class="list">
					<image src="../../static/kefu.png" mode=""></image>
					<input type="text" />
				</view>
				<view class="list">
					<image src="../../static/kefu.png" mode=""></image>
					<input type="password" />
				</view>
				<view class="remerbe">
					<label>
						<checkbox /><text>记住账号密码</text>
					</label>
					<view class="forget" @click="type=4">
						找回密码
					</view>
				</view>
				<view class="sign" @click="sign">
					登录
				</view>
				
				<view class="register" @click="type=3">
					<text>未有账号</text>
					<text class="green">5秒急速注册</text>
				</view>
				
				<button class="sign" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信登录</button>
			</template>
			
			<template v-if="type===2">
				<view class="list">
					<image src="../../static/kefu.png" mode=""></image>
					<input type="text" placeholder="请输入手机号"/>
				</view>
				<view class="list">
					<image src="../../static/kefu.png" mode=""></image>
					<input type="text"  placeholder="请输入图片校验码"/>
				</view>
				<view class="list list-last">
					<image src="../../static/kefu.png" mode=""></image>
					<input type="text"  placeholder="请输入验证码" />
					<view class="code-num">
						<view class="line"></view>
						获取验证码
					</view>
				</view>
				
				<view class="sign">
					登录
				</view>
				
			</template>
			
			<template v-if="type===3">
				<view class="list">
					<image src="../../static/kefu.png" mode=""></image>
					<input type="text" placeholder="请输入姓名"/>
				</view>
				<view class="list">
					<image src="../../static/kefu.png" mode=""></image>
					<input type="text"  placeholder="请输入密码"/>
				</view>
				<view class="list">
					<image src="../../static/kefu.png" mode=""></image>
					<input type="text"  placeholder="请再次输入密码"/>
				</view>
				<view class="list">
					<image src="../../static/kefu.png" mode=""></image>
					<input type="text"  placeholder="请输入手机号"/>
				</view>
				<view class="list">
					<image src="../../static/kefu.png" mode=""></image>
					<input type="text"  placeholder="请输入图片校验码" />
					<view class="code-num">
						<view class="line"></view>
						获取验证码
					</view>
				</view>
				<view class="list">
					<view class="label">
						选择单位
					</view>
					<view class="value value-radio">
						<label class="radio">
							<radio value="" /><text>个人</text>
						</label>
						<label class="radio">
							<radio value="" /><text>公司</text>
						</label>
					</view>
				</view>
				<view class="list list-last">
					<view class="label">
						输入公司名称
					</view>
					<view class="value">
						<input type="text" placeholder="输入公司名称"/>
					</view>
				</view>
				
				<view class="sign">
					注册
				</view>
				
			</template>
			
			<template v-if="type===4">
				<view class="list">
					<image src="../../static/kefu.png" mode=""></image>
					<input type="text" placeholder="请输入手机号"/>
				</view>
				<view class="list">
					<image src="../../static/kefu.png" mode=""></image>
					<input type="text"  placeholder="请输入图片校验码"/>
				</view>
				<view class="list">
					<image src="../../static/kefu.png" mode=""></image>
					<input type="text"  placeholder="请输入验证码" />
					<view class="code-num">
						<view class="line"></view>
						获取验证码
					</view>
				</view>
				<view class="list">
					<image src="../../static/kefu.png" mode=""></image>
					<input type="password" placeholder="请输入新密码"/>
				</view>
				<view class="list list-last">
					<image src="../../static/kefu.png" mode=""></image>
					<input type="password" placeholder="请再次输入新密码"/>
				</view>
				
				<view class="sign">
					登录
				</view>
				
				
			</template>


		</view>
	</my-layout>

</template>

<script>
	export default {
		data() {
			return {
				headerTitleMaps:{
					1:"建杰国际·登录",
					2:"建杰国际·登录",
					3:"建杰国际·注册",
					4:"找回密码",
				},
				bannerList: [{
						title: "账号登录",
						id: 1,
					},
					{
						title: "快速登录",
						id: 2,
					},
				],
				type: 1, //1登录 2快速登录 3注册 4找回密码
			}
		},
		onLoad() {

		},
		methods: {
			sign() {
				uni.navigateTo({
					url:"/pages/index/index"
				})
			},
			getPhoneNumber(e) {
				console.log(e.detail.code) // 动态令牌
				console.log(e.detail.errMsg) // 回调信息（成功失败都会返回）
			}
		}
	}
</script>

<style lang="scss">
	.login-content {
		height: 100%;
		position: relative;
		padding: 0 42rpx;
		overflow: hidden;

		.banner {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			margin: 44rpx 0 84rpx 0;

			.line-bar {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				height: 32rpx;
				width: 0rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				border: 2rpx solid #EEEEEE;
			}

			.banner-list {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: bold;
				font-size: 36rpx;
				color: #BCBCBC;
				font-style: normal;
				text-transform: none;

				&+.banner-list {
					margin-left: 144rpx;
				}

				&--active {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: bold;
					font-size: 36rpx;
					color: #333333;
					font-style: normal;
					text-transform: none;
					display: flex;
					flex-direction: column;
					align-items: center;

					.line {
						width: 36rpx;
						height: 4rpx;
						background: #3F4DD4;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						margin-top: 8rpx;
					}
				}
			}
		}

		.list {
			height: 88rpx;
			border-bottom: 2rpx solid #EEEEEE;
			display: flex;
			align-items: center;
			position: relative;
			z-index: 10;

			&+.list {
				margin-top: 28rpx;
			}

			image {
				width: 40rpx;
				height: 40rpx;
			}

			input {
				width: 1px;
				flex-grow: 1;
				height: 100%;
				padding: 0 24rpx;
			}
			
			.code-num{
				display: flex;
				align-items: center;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 28rpx;
				color: #3188FF;
				font-style: normal;
				text-transform: none;
				flex-shrink: 0;
				
				.line{
					height: 32rpx;
					width: 0rpx;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					border: 2rpx solid #EEEEEE;
					margin: 0 24rpx;
				}
			}
			
			.label{
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 28rpx;
				color: #121212;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
			
			.value{
				width: 1px;
				flex-grow: 1;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 28rpx;
				color: #121212;
				text-align: left;
				font-style: normal;
				text-transform: none;
				padding-right: 24rpx;
				
				input{
					width: 100%;
					height: 100%;
					text-align: right;
					
				}
			}
			
			.value-radio{
				display: flex;
				justify-content: flex-end;
				
				.radio{
					&+.radio{
						margin-left: 40rpx;
					}
				}
			}
		}
		
		.list-last{
			margin-bottom: 48rpx;
		}

		.remerbe {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 36rpx 0 48rpx 0;

			.label {
				display: flex;
				align-items: center;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				font-style: normal;
				text-transform: none;
			}

			.forget {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #3188FF;
				font-style: normal;
				text-transform: none;
			}
		}

		.register {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 90rpx;

			.green {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #3188FF;
				font-style: normal;
				text-transform: none;
			}
		}



		.sign {
			height: 100rpx;
			background: #3F4DD4;
			border-radius: 66rpx 66rpx 66rpx 66rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			font-style: normal;
			text-transform: none;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			z-index: 10;
		}

		.bg {
			position: absolute;
			bottom: 0;
			width: 100%;

			image {
				width: 100%;
			}
		}
	}
</style>